﻿@section Scripts
{
	<script src="../../Scripts/plgns/jq/jquery.tinycarousel.js" type="text/javascript"></script>
	<script src="../../Scripts/plgns/jq/jquery.colorbox.js" type="text/javascript"></script>

	<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBCT2p8LOFHtRKYZUJUSns4WGEj23xhhWM&sensor=false"></script>
	

	<script src="../../Scripts/app/iRealtor.Maps.js" type="text/javascript"></script>

	<script type="text/javascript">
		var map;
		var markersArray = [];
		
		function initialize() {
			var startZoom = 14;

			var mapOptions = {
				zoom: startZoom,
				center: new window.google.maps.LatLng(46.302425, 30.659908),
				mapTypeId: window.google.maps.MapTypeId.ROADMAP
			};

			map = new window.google.maps.Map(document.getElementById('map-canvas'), mapOptions);

			renderPlaces(map, startZoom);

			window.google.maps.event.addListener(map, 'zoom_changed', function () {
				var zoom = map.getZoom();
				renderPlaces(map, zoom);
			});
		}

		function renderPlaces(map, zoom) {
			clearMarkers();
			$.getJSON('/Map/GetPlacesByScale?zoom=' + zoom, function (data) {
				$.each(data, function (index, element) {
					var infoWindow = new window.google.maps.InfoWindow;

					var onMarkerClick = function () {
						var m = this;

						var sliderId = 'slider' + element.Group.GroupId;
						var html = window.iRealtor.Maps.MapContentService.GetPopupContent(element, sliderId);

						infoWindow.setContent(html);
						infoWindow.open(map, m);

						window.google.maps.event.addListener(infoWindow, 'domready', function () {
							$('#' + sliderId).tinycarousel();
							$('.' + sliderId).colorbox({ rel: '.' + sliderId });
						});
					};

					window.google.maps.event.addListener(map, 'click', function () {
						infoWindow.close();
					});

					var imageIcon = {
						url: element.PlaceViews[0].PlaceImages[0].ThumbPath,
						scaledSize: new window.google.maps.Size(15, 15)
					};

					var zIndex = 0;
					if (element.IsBig) {
						imageIcon.scaledSize = new window.google.maps.Size(50, 50);
						zIndex = 100;
					}

					var marker = new window.google.maps.Marker({
						position: new window.google.maps.LatLng(element.PlaceViews[0].Place.Latitude, element.PlaceViews[0].Place.Longitude),
						map: map,
						title: element.PlaceViews[0].Place.Name,
						icon: imageIcon,
						zIndex:zIndex
					});

					markersArray.push(marker);
					window.google.maps.event.addListener(marker, 'click', onMarkerClick);
				});
			});
		}

		function clearMarkers() {
			if (markersArray) {
				for (var i in markersArray) {
					markersArray[i].setMap(null);
				}
			}

			markersArray = [];
		}

		window.google.maps.event.addDomListener(window, 'load', initialize);
		
	</script>
}
@section Styles
{
	<style>
		html, body, #map-canvas { margin: 0; padding: 0; height: 100%; }
	</style>

	<link href="../../Content/plugins/tinycarousel/tinycarousel.css" rel="stylesheet" type="text/css" />
	<link href="../../Content/plugins/colorbox/colorbox.css" rel="stylesheet" type="text/css" />
}
<div id="map-canvas"></div>
